<template>
	<!-- 标签的header -->
	<view>
		<view class="u-p-40 u-p-r-20 u-bg-white">
			<view class="u-flex user-box u-col-top">
				<view class="u-m-r-30"><u-image height="150" width="150" shape="circle" :src="tags.image"></u-image></view>
				<view class="u-flex-1">
					<view class="u-flex u-row-between u-p-t-20">
						<view class="u-font-28 u-p-b-20 u-p-t-10" v-text="tags.name"></view>
						<view class="u-m-l-30" @click="report">
							<u-icon name="warning-fill" size="25"></u-icon>
							举报
						</view>
					</view>
					<view class="u-font-24 u-content-color"></view>
				</view>
			</view>
			<view class="">
				<view class="u-flex u-text-center u-m-t-30">
					<view class="u-flex-4">
						<view class="u-tips-color u-p-b-10">问答</view>
						<view class="text-bold">{{ tags.questions }}</view>
					</view>
					<view class="u-flex-4">
						<view class="u-tips-color u-p-b-10">文章</view>
						<view class="text-bold">{{ tags.articles }}</view>
					</view>
					<view class="u-flex-4">
						<view class="u-tips-color u-p-b-10">关注者</view>
						<view class="text-bold">{{ tags.followers }}</view>
					</view>
				</view>
				<view class="u-flex u-text-center u-m-t-50">
					<view class="u-flex-4">
						<u-button hover-class="none"
							type="primary"
							size="mini"
							:custom-style="{ backgroundColor: theme.bgColor, color: theme.color, width: '80%', height: '60rpx' }"
							@click="openPage('follow')"
						>
							<u-icon name="chat"></u-icon>
							<text class="u-m-l-10">{{ tags.followed ? '已关注' : '关注话题' }}</text>
						</u-button>
					</view>
					<view class="u-flex-4">
						<u-button hover-class="none" type="warning" size="mini" :custom-style="buttonStyle" @click="openPage(0)">
							<u-icon name="edit-pen-fill"></u-icon>
							<text class="u-m-l-10">创建问题</text>
						</u-button>
					</view>
					<view class="u-flex-4">
						<u-button hover-class="none"
							type="primary"
							size="mini"
							:custom-style="{ backgroundColor: theme.lightColor, color: theme.bgColor, border: '1px solid ' + theme.faBorderColor, width: '80%', height: '60rpx' }"
							@click="openPage(1)"
						>
							<u-icon name="edit-pen-fill"></u-icon>
							<text class="u-m-l-10">发布文章</text>
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<fa-report :source_id="jb_id" :type="jb_type" ref="faReport"></fa-report>
	</view>
</template>

<script>
import { attention } from '@/common/fa.mixin.js';
export default {
	name: 'fa-tag-header',
	mixins: [attention],
	props: {
		tag: {
			type: Object,
			default: {}
		}
	},
	watch: {
		tag: {
			handler: function(newValue, oldValue) {
				this.tags = newValue;
			},
			immediate: true
		}
	},
	data() {
		return {
			buttonStyle: {
				width: '80%',
				height: '60rpx'
			},
			tags: {},
			jb_id: 0,
			jb_type: 'tag'
		};
	},
	methods: {
		openPage(index) {
			if (index == 'follow') {
				//关注话题
				if (this.tag.followed) {
					this.goAttentionDelete(this.tags, 'tag');
				} else {
					this.goAttentionCreate(this.tags, 'tag');
				}
				return;
			}
			let p = [{ path: '/pages/community/question/post', query: { tag_id: this.tags.id } }, { path: '/pages/community/article/post', query: { tag_id: this.tags.id } }];
			this.$wanlshop.to(p[index]);
		},
		report() {
			this.jb_id = this.tag.id;
			this.jb_type = 'tag';
			this.$refs.faReport.show();
		},
		sendMsg() {
			this.$emit('send');
		}
	}
};
</script>

<style></style>
